<template>
	<view class="fullpage" 
		:style="[style]" 
		:class="showStatus ? type: '' "
		@click="full"
		v-show="load"
	>
	<view class="">
		{{showStatus}}
		<slot></slot>
	</view>
		
		
	</view>
</template>

<script>
	/**
	 * 全屏遮罩组件
	 * bgcolor {String} 背景颜色 
	 * bgClickClose {Boolean} 点击背景是否可关闭 
	 * type {String} 遮罩显示方式  bottom-top 动画下面滑入 close 直接消失 
	 * 
	 * 方法
	 * show 显示
	 * close 消失
	 */
	export default{
		props:{
			bgcolor:{
				type:String,
				default: 'rgba(0,0,0,0.4)'
			},
			bgClickClose:{ // 点击背景是否可关闭
				type: Boolean,
				default: true
			},
			type:{ // 显示方式
				type: String,
				default: 'close' // bottom-top 动画下面滑入 close 直接消失 
			}
		},
		computed:{
			style(){
				var obj = {'background-color':this.bgcolor}
				if(this.type == 'close') {
					obj['display'] = 'none'
				}else{
					obj['top'] = '100vh'
					obj['transition'] = 'top 0.3s linear'
				}
				return obj
			}
		},
		mounted() {
			this.load = true
		},
		data(){
			return {
				showStatus: false,
				load:false
			}
		},
		methods:{
			full(){
				if(this.bgClickClose){this.close()}
			},
			show(){
				this.showStatus = true
			},
			close(){
				this.showStatus = false
			}
		}
	}
</script>

<style scoped>
	.fullpage{
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		/* transition: top 0.3s linear; */
		z-index: 1000;
	}
	.close{
		display: block !important;
	}
	.bottom-top{
		top: 0 !important;
	}
</style>
